import React, {
    Component
} from 'react'
import {
    StyleSheet,
    View,
    ScrollView,
    Dimensions,
} from 'react-native'
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
import LabelBarWithSwitch from '../../components/styleCompoent/LabelBarWithSwitch';
import TwoLabelBarAndSlider from '../../components/styleCompoent/TwoLabelBarAndSlider';
import NavigationBar from '../../components/common/NavigationBar'
import {fetchDeviceDetailById, controlDevice } from '../../action/girlAction';
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
const EntityLabels = require('../../constants/entities');
import assign from 'lodash/assign';

class WaterControl extends Component {
  constructor(props) {
    super(props)

    // 初始状态
    this.state = {
      TargetTemperature: '0',
    }

  }
  componentWillMount() {
    const { fetchDeviceDetailById,  deviceId} = this.props;
    fetchDeviceDetailById(deviceId);
    this.convertPropsToStates(this.props);

  }
  convertPropsToStates(props) {
    const {devicesEntities, deviceId} = props;
    const device = devicesEntities[deviceId];
    if(device && device.status.targetTemperature){
        this.setState({
          TargetTemperature: device.status.targetTemperature,
        })
    }
    if (device && device.status){
      if (device.status.switch === 'true'){
        this.setState({
          value: true,
        })
      }
      else {
        this.setState({
          value: false,
        })
      }
    }

    const newState = assign({
      device
    });

    if (newState) {
      this.setState(newState);
    }
  }
  componentWillReceiveProps(nextProps) {
    this.convertPropsToStates((nextProps));
  }

  controlAir(params){
    const {controlDevice, deviceId} = this.props;
    controlDevice(params, deviceId);
  }
  render() {
    const { TargetTemperature, device } = this.state;
    const status = device && device.status;
    return(
      <View style = {styles.container}>
        <NavigationBar
          title={'水地暖控制器'}
          statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
          navigator={this.props.navigator}
          style={{backgroundColor: '#F4F4F4'}}
        />
        <ScrollView>
          <LabelBarWithSwitch
            barWidth={width-30}
            barHeight={68}
            containerStyle={{marginTop: 15}}
            title="电源"
            changeValue={(value)=>{
              this.setState({value: value},()=>{
                const newAirParams = {'Switch': value}
                this.controlAir(newAirParams);
              })
            }}
            value={this.state.value}
          />
          <TwoLabelBarAndSlider
            barWidth={width-30}
            barHeight={194}
            containerStyle={{marginTop: 15, marginBottom: 15}}
            firstLineTitle={'室内温度'}
            secondLineTitle={'温度设置'}
            secondlineValue={parseInt(TargetTemperature, 10)}
            firstLineValue={'暂无'}
            maximumValue={33}
            minimumValue={16}
            chooseValue={(TargetTemperature)=>{
              this.setState({TargetTemperature},()=>{
                const newAirParams = {'TargetTemperature': TargetTemperature}
                this.controlAir(newAirParams);
              })

            }}
          />
        </ScrollView>
      </View>
    )
  }
}

function mapDispatchToProps(dispatch) {
  const actions = {
    fetchDeviceDetailById,
    controlDevice
  };
  return bindActionCreators(actions, dispatch);
}

function mappingStateToProps(state, ownProps) {
  const entities= state['entities'];
  const devicesEntities = entities[EntityLabels.devices];
  return {
    devicesEntities,
  }
}

module.exports = connect(mappingStateToProps, mapDispatchToProps)(WaterControl);

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F4F4',
    flex: 1,
  },
})
